<template>
  <div>
    <x-Table
      :loading="loading"
      :table-data="tableData"
      :options-data="options"
      :pagination="pagination"
      :rule-form="ruleForms"
      @handleAdd="handleAdd"
      @handlePaginationCurrentChange="handlePaginationCurrentChange"
      @handlePaginationSizeChange="handlePaginationSizeChange"
      @handleHeardDel="handleHeardDel"
      @searchForm="searchForm"
      @handleHeardEdit="handleHeardEdit"
      @resetForm="resetForm"

    >
    </x-Table>
    <!--    弹窗区域-->
    <el-dialog
      v-dialog-drag
      :title="alertTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
    >
      <form-create
        v-model="fapi"
        :rule="rule"
        :option="option"
        :value.sync="formParam"
        @submit="onSubmit"
      >
      </form-create>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      searchParams: {},//搜索对象
      loading:true,
      row: null, //当前选择数据
      ruleForms:{
        title: {label: "标题", prop: "title", type: "text"},
        type: {label: "类型", prop: "types", type: "select",select:[{label:'更新公告',value:'更新公告'},{label:'使用帮助',value:'使用帮助'},{label:'消息通知',value:'消息通知'}]},
      },
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      otherParam: {
        halfCheckedKeys: [],
      }, //如果有其他情况会拼接这个参数
      fapi: {},
      formParam: {},
      rule: [

        {
          "type": "input",
          "field": "title",
          "title": "标题",
          "info": "",
          "_fc_drag_tag": "input",
          "hidden": false,
          "display": true
        },
        {
          "type": "select",
          "field": "type",
          "title": "类型",
          "info": "",
          "effect": {
            "fetch": ""
          },
          "options": [
            {
              "value": "更新公告",
              "label": "更新公告"
            },
            {
              "value": "使用帮助",
              "label": "使用帮助"
            },
            {
              "value": "消息通知",
              "label": "消息通知"
            }
          ],
          "_fc_drag_tag": "select",
          "hidden": false,
          "display": true
        },
        {
          "type": "fc-editor",
          "field": "content",
          "title": "内容",
          "info": "",
          "_fc_drag_tag": "fc-editor",
          "hidden": false,
          "display": true,
          "props":{
            config:{
              uploadImgServer:'http://www.free.com/api/Upload/upload',
              uploadFileName:'file',
              height:'600',
            }
          }
        },
        {
          "type": "switch",
          "field": "status",
          "title": "状态",
          "info": "",
          "_fc_drag_tag": "switch",
          "hidden": false,
          "display": true
        }
      ],
      option: {
        form: {
          inline: false,
          labelPosition: "right",
          size: "small",
          labelWidth: "125px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: false,
        },
        resetBtn: true,
      },
      dialogVisible: false,
      alertTitle: "添加",
      tableData: [],
      options: {
        fields: {
          id: { label: "ID", prop: "id", width: "120", order: true },
          title: { label: "标题", prop: "title" },
          type: { label: "类型", prop: "type",type:'tag',options:[{label:'更新公告',attr:'success'},{label:'使用帮助',attr:'info'},{label:'消息通知',attr:'primary'}] },
          content: { label: "内容", prop: "content" },
          status: {
            label: "状态",
            prop: "status",
            type: "switch",
            activeValue: true,
            inactiveValue: false,
            switchChage: function (scope) {},
          },
          create_time: { label: "创建时间", prop: "create_time", order: true },
          button: {
            label: "操作",
            width: "130",
            type: "func",
            fixed: true,
            edit: function (scope) {
              setTimeout(() => {
                _this.fapi.setValue("title", scope["row"].title);
                _this.fapi.setValue("user_ids", scope["row"].user_ids);
                _this.fapi.setValue("status", scope["row"].status);
                _this.fapi.setValue("type", scope["row"].type);
                _this.fapi.setValue("content", scope["row"].content);
              }, 0);
              _this.row = scope["row"];
              _this.alertTitle = "编辑";
              _this.dialogVisible = true;
            },
            del: function (scope) {
              _this.deleteNotice(scope["row"].id);
            },
          },
        },
      },
    };
  },
  methods: {
    resetForm:function (){
      _this.searchParams = {};
    },
    handlePaginationCurrentChange: function (val) {
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.search(_this.searchParams);
    },

    handlePaginationSizeChange: function (val) {
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.search(_this.searchParams);
    },

    /**
     * 通知消息列表
     */
    getNoticeList: function () {
      _this.$store
        .dispatch("notice/getNoticeList", {
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.notice.noticeList;
          this.tableData = data.data;
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    },

    /**
     *
     */
    handleHeardEdit: function (val) {
      let scope = val[0];
      _this.row = scope;
      _this.alertTitle = "编辑";
      _this.dialogVisible = true;
      setTimeout(() => {
        _this.fapi.setValue("roleName", scope.title);
        _this.fapi.setValue("weight", scope.weight);
        _this.fapi.setValue(
          "permission",
          scope.rules == null ? scope.rules : scope.rules.split(",")
        );
        _this.fapi.setValue("remark", scope.remark);
        _this.fapi.setValue("status", scope.status);
      }, 0);
    },

    /**
     * 批量删除
     */
    handleHeardDel: function (val) {
      let del = [];
      val.forEach((item, index) => {
        del.push(item.id);
      });
      _this.deleteNotice(del);
    },


    addDate: function (param) {
      _this.$store
        .dispatch("notice/addNotice", {
          title: param["title"],
          type: param["type"],
          content: param["content"],
          status: param["status"],
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.$message.success(msg);
            _this.getNoticeList();
          } else {
            _this.$message.error(msg);
          }
        });
    },
    /**
     * 表单提交回调
     */
    onSubmit: function (val) {
      if (_this.alertTitle === "添加") {
        _this.addDate(val);
      } else {
        //编辑
        _this.updateNotice(val);
      }
    },

    /**
     * 搜索角色标题
     */
    searchForm: function (val) {
      _this.searchParams = val;
      _this.loading = true;
     _this.search(val)
    },
    search(val){
      _this.$store
        .dispatch("notice/searchNotice", {
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
          title: val.title,
          type: val.types,
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.notice.noticeList;
          this.tableData = data.data;
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    },
    /**
     * 更新角色
     */
    updateNotice: function (param) {
      _this.$store
        .dispatch("notice/updateNotice", {
          id: _this.row["id"],
          title: param["title"],
          type: param["type"],
          content: param["content"],
          status: param["status"],
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.getNoticeList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },

    /**
     * 删除角色
     */
    deleteNotice: function (val) {
      _this.$store
        .dispatch("notice/deleteNotice", {
          id: val,
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.getNoticeList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },

    /**
     *  表单导航栏添加点击
     */
    handleAdd: function () {
      _this.alertTitle = "添加";
      this.dialogVisible = true;
    },
  },
  watch: {
    dialogVisible(newVal) {
      setTimeout(() => {
        if (!newVal) {
          _this.fapi.resetFields(); //清空数据
          _this.fapi.setValue('content','');
        }
      }, 0);
    },
  },
  created() {
    _this = this;
  },
  mounted() {
    this.getNoticeList();
  },
};
</script>

<style scoped></style>
